import React, { useState } from 'react';
import { Button, Space, Table, Tag, Switch, Modal, message, Input, Popconfirm } from 'antd';
import type { TableProps, GetProps } from 'antd';
import { useAppDispatch, useAppSelector } from '../../store/reactreduxts';
import type { shopTS, typeTS } from '../../store/crmsTS';
import Myfrom from './Myfrom';
import * as async from '../../store/crmsSlice';

type SearchProps = GetProps<typeof Input.Search>;

//商品列表组件
const ShopList: React.FC = () => {

  //获取数据
  let obj = useAppSelector(state => state.crms1)
  //console.log(obj);
  let dispatch = useAppDispatch()

  //控制弹层的状态
  const [isModalOpen, setIsModalOpen] = useState(false);
  //控制弹层的方法
  const showModal = () => {
    setIsModalOpen(true);
  };

  const handleOk = () => {
    setIsModalOpen(false);
  };

  const handleCancel = () => {
    setIsModalOpen(false);
  };
  //控制弹层的标题
  let [title, setTitle] = useState('')
  //控制 添加={} 编辑={...}
  let [itemobj, setItemobj] = useState({})


  //表头设置
  const columns: TableProps<shopTS>['columns'] = [
    {
      title: '商品名称',
      dataIndex: 'title',
    },
    {
      title: '商品类型',
      dataIndex: 'typeId',
      render: (typeId) => {
        //遍历分类列表 判断分类的typeId和这个商品的typeId是否一致
        return obj.typelist.map((item: typeTS) => {
          if (item.typeId == typeId) {
            return item.label
          }
        })
      }
    },
    {
      title: '商品价格',
      dataIndex: 'price',
    },
    {
      title: '商品状态',
      dataIndex: 'Collect',
      render: (Collect, record) => {
        return <Switch checked={Collect} onChange={() => {
          //切换状态
          let obj = {
            ...record,
            Collect: !Collect
          }
          dispatch(async.async_editshoplist(obj))
        }} />
      }
    },
    {
      title: '商品规格',
      dataIndex: 'specification',
      render: (specification) => {
        return specification.map((ele: string) => {
          return <Tag color='green' key={ele}>{ele}</Tag>
        })
      }
    },
    {
      title: '操作',
      key: 'action',
      render: (_, record) => (
        <Space size="middle">
          <Button type='primary' onClick={() => {
            //1.显示弹层
            showModal()
            //2.标题 = 编辑
            setTitle('编辑')
            //3.编辑={...}
            setItemobj(record)
          }}>编辑</Button>
          <Popconfirm
            title="提示"
            description="确定删除吗?"
            onConfirm={() => {
              //执行删除的异步方法
              dispatch(async.async_delshoplist(record.id))
            }}
            okText="是"
            cancelText="否"
          >
            <Button danger>删除</Button>
          </Popconfirm>
        </Space >
      ),
    },
  ];

  const { Search } = Input;
  //点击搜索的回调函数
  const onSearch: SearchProps['onSearch'] = (value) =>{
    //搜索的关键字
    console.log(value);
    //执行搜索的方法
    dispatch(async.async_searchshoplist(value))

  } 
    


  return <div>

    <Space>
      {/* 对话框 */}
      <Button type="primary" onClick={() => {
        //1.显示弹层
        showModal()
        //2.标题 = 添加
        setTitle('添加')
        //3.添加={}
        setItemobj({})
      }}>
        添加
      </Button>
      {/* 搜索框 */}
      <Search placeholder="请输入名称搜索" onSearch={onSearch} enterButton />
    </Space>

    <Modal
      title={title}
      closable={{ 'aria-label': 'Custom Close Button' }}
      open={isModalOpen}
      onOk={handleOk}
      onCancel={handleCancel}
      footer={null}
    >
      {/* 添加和编辑的组件 */}
      <Myfrom key={new Date().getTime()} onCancel={handleCancel}
        title={title} itemobj={itemobj} />
    </Modal>

    {/* 表格 */}
    <Table<shopTS> columns={columns} dataSource={obj.shoplist}
      rowKey={'id'} pagination={{ pageSize: 5 }} />
  </div>
};

export default ShopList;